<template>
  <!-- 榜单 -->
  <div class="music_list g-wrap">
    <div class="ml_title">
      <div class="ml_title_left pull-left">
        <p class="pull-left">榜单</p>
      </div>
      <div class="ml_title_right pull-right">
        <a href="#">更多</a>
        <i class="cor s-bg"></i>
        </div>
         </div>
        <div class="song_table flex">
          <SongListItem :data="Soaringlist"></SongListItem>
          <SongListItem :data="NewSonglist"></SongListItem>
          <SongListItem :data="Originallist"></SongListItem>
      </div>
  </div>
</template>
 
<script>
import { getToplistApi, getPlaylistApi } from "../../http/api";
import SongListItem from "./SongListItem.vue";
export default {
  components: { SongListItem },
  data() {
    return {
      SongList: [],
      Soaringlist: { playlist: { tracks: []}},
      NewSonglist: { playlist: { tracks: [] } },
      Originallist: { playlist: { tracks: [] } },
      SongListId: "",
    };
  },
  created() {
    this.getToplist();
  },
  methods: {
    async getToplist() {
      const res = await getToplistApi();
      if (res.code === 200) {
        this.SongList = res.list.slice(0, 3);
        const res1 = await this.getPlaylist(this.SongList[0].id);
        const res2 = await this.getPlaylist(this.SongList[1].id);
        const res3 = await this.getPlaylist(this.SongList[2].id);
        this.Soaringlist = res1;
        this.NewSonglist = res2;
        this.Originallist = res3;
      
      }
    },

    async getPlaylist(id) {
      const res = await getPlaylistApi(id);
      return res;
    },
  },
};
</script>
 
<style lang = "less" scoped>
/* 榜单 */
.ml_title {
  height: 33px;
  padding: 0 10px 0 34px;
  background: url("../../assets/images/index.png") no-repeat;
  background-position: -225px -156px;
  border-bottom: 2px solid #c10d0c;
}
.ml_title_left p {
  float: left;
  font-size: 20px;
  line-height: 28px;
}
.ml_title_right {
  float: right;
  margin-top: 9px;
}
.ml_title_right a {
  color: #333;
}
.ml_title_right a:hover {
  text-decoration: underline;
}
.ml_title_right .cor {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: middle;
  background-position: 0 -240px;
}
.music_list .song_table {
  width: 700px;
  height: 472px;
  margin-top: 20px; 
  background: url("../../assets/images/index_bill.png") no-repeat;
}

.s-bg {
  background: url("../../assets/images/index.png") no-repeat;
}
</style>